<template>
    <div class="Playlist-out">
      <div class="Medio-top">
          <div :class="{active:videoIndex===1}" @click="videoIndex=1" class="Medio-top-item">视频</div>
          <div  :class="{active:videoIndex===2}" @click="videoIndex=2" class="Medio-top-item">Mv</div>
      </div>
    <!-- 视频 -->
    <div v-if="videoIndex==1">  
    <div class="tableBox" >   
      <div class="showTable" >
      <el-popover   v-model="isSortPopShow" placement="bottom"  popper-class="sortPop" width="400" trigger="click">
           <showTable
     @passName=passName
     :allTable=videolist
     />
      <div class="text" slot="reference">{{bian}}</div>
     </el-popover>
      </div>
      <ul>
        <li :class="{active:i===changeIndex}" @click="changeTable(i,item)" v-for="(item,i) in partlist" :key="i">{{item.name}}</li>
      </ul>
    </div>
    <div class="video-list">
         <div class="video-item" v-for="(item,i) in Videos" :key="i" @click="tovideoDetail(item)">
           <el-image class="el-image"  :src="item.data.coverUrl" lazy></el-image>
              <p> {{item.data.title}}</p>
         </div>
    </div>
  </div>
  <!-- Mv -->
    <Mv  v-if="videoIndex==2"/>
  </div>
</template>

<script>
import showTable from "../common/UseOnce/showTable"
import Mv from "./Mv/Mv"
export default {
  components:{
    showTable,
    Mv
  },
   data(){
     return{
       changeIndex:0,  //用来高亮
       videolist:[],  //获取所有标签
       partlist:[],   //获取部分标签
       isSortPopShow:false, //是否点击全部标签 隐藏弹出框
       Videos:[],    //获取视频列表
       num:1,
       videoId:"",
       bian:"",
       videoIndex:1,
     }
   },
   methods:{
     async getallVideo(){
      const {data:res}= await this.$request("/video/group/list")
      if(res.code!=200) return
      this.videolist=res.data
     },
    async getvideo(){
      console.log("进去了打印次数",this.num)
    const {data:res}= await this.$request("/video/group",{
           id:this.videoId,
           offset:8*this.num
         })
          this.num++
         if(res.code!=200) return 
        this.Videos=[...this.Videos,...res.datas]
      if(this.num<3) {
        console.log("判断num是否小于")
        this.getvideo()
      }
     },
       async getPartVideo(){  //获取部分标签
       
      const {data:res}= await this.$request("/video/category/list")
        this.partlist=res.data
     },
    async changeTable(i,item){  //部分标签点击
     if(item.id===this.videoId) return
     this.bian=item.name
       this.changeIndex=i
       this.num=1
       this.videoId=item.id
       this.Videos=[]
       this.getvideo()
     },
    async passName(item){  //全部标签点击
       if(item.id===this.videoId) return
       this.bian=item.name
      this.videoId=item.id
       this.Videos=[]
       this.getvideo()
    },
    scrollDs(fn,delay){ //滚动刷新数据
       let last=0;
       return function(){
         let noew=+new Date()
         if((noew-last)>delay){
             last=noew
              fn()
         }
       }
    },
    tovideoDetail(item){ 
       this.$router.push(`/videodetails?vid=${item.data.vid}`)
    }
   },
   mounted(){
     this.getallVideo()
     this.getPartVideo()
      window.addEventListener('scroll', this.scrollDs(this.getvideo,3000))
   },
   watch:{
     partlist(val){
       this.videoId=val[0].id
       this.bian=val[0].name
       this.getvideo()       
     }
   }
}
</script>

<style lang="less">
.Playlist-out{
 width: 1300px;
  display: flex;
  flex-direction:column;
  margin:70px 140px;
  .Medio-top{
    width:100%;
    height:40px;
    display:flex;
    text-align:center;
     .Medio-top-item{
        width:60px;
        height:40px;
        line-height:30px;
        margin-bottom:20px;
     }
     .active{
       font-size:20px;
       font-weight:600;
       color:#000;
       border-bottom:3px solid red;
     }
  }
  .tableBox{
    width:100%;
    height:30px;
    display:flex;
    margin:20px 0 30px 0;
   .showTable{
      .text{
         width:60px;
         height:30px;
         line-height:30px;
         border-radius:10px;
         color:#aaa;
         text-align:center;
         background-color:#fff;
         border:1px solid #aaa;
          &:hover{
              background-color:#ccc;
                 color:black;
         }
      }
   }
    ul{
       width:100%;
       height:30px;
      display:flex;
     align-items:center; 
     justify-content:flex-end;
     margin-right:40px;
       li{
      //  padding:0 10px;
      margin:0 10px;
       font-size:14px;
       color:#666666;
      }
         .active{
         font-size:14px;
         border-radius:10px;
         background-color:#A99A6B;
         line-height:20px;
         text-align:center;
         width:70px;
         height:20px;

  }
     }  
   }
.video-list{
    width:100%;
     display:flex;
     flex-wrap:wrap;
   .video-item{
     width:25%;
     height:200px;    
     overflow: hidden;  
       .el-image{
       width:90%;
       height:160px;
       border-radius:10px;
       }
     p{
         width:90%;
       font-size:13px;
       
     }
   }
 
}
}
</style>